<table class="table  table-hover" style="margin-top:5px;min-width:1300px;" >

  <thead>
    <tr style="background-color: #f5f5f5;">
      <th><input type="checkbox" id="ckb_head" name="check_box" /></th>

      <th>主机名</th>
      <th>IP地址</th>
      <th>所属组</th>
      <th>描述</th>
      <th>设备类型</th>
      <th>设备状态</th>
      <th>机房</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody id="host_table">

    {% for host in host_list %}
    <tr>
      <td><input id="{{ host.IP  }}" type="checkbox" name="ckb"/></td>
      <td>{{ host.hostname }}</td>
      <td>{{ host.IP }}</td>
      <td>{{ host.host_group }}</td>
      <td>{{ host.msg }}</td>
      <td>{{ host.device_type }}</td>
      <td>{{ host.status }}</td>
      <td>{{ host.idc }}</td>

      <td style="padding-left:5px;">
        <a href="/cmdb/detailinfo/ip={{ host.IP }}" style="text-decoration:none;" data-toggle="tooltip" data-placement="left" title="详细信息"><span class="fa fa-info-circle"></span> </a>&nbsp;&nbsp;&nbsp;

        <a href="#" name="edit" ip="{{ host.IP }}" data-toggle="modal" data-target="#edit-hostModal" style="text-decoration:none;" title="修改"><span class="fa fa-pencil"></span> </a>&nbsp;&nbsp;&nbsp;

        <a href="#" name="del" ip="{{ host.IP }}" style="text-decoration:none;" data-toggle="tooltip" data-placement="right" title="删除"><span class="fa fa-trash"></span> </a>

      </td>
    </tr>
  {% endfor %}


  </tbody>


</table>
<div class="text-right" style="margin-top:-30px;padding-right:9%">
  <ul class="pagination" id="pagination">
  </ul>
</div>


<script>

  //多选按钮，全选，全不选
  $("#ckb_head").click(function(){
     if($(this).prop("checked")){//全选
         $("input[name='ckb']").attr("checked","true");
     }else{//全不选
         $("input[name='ckb']").removeAttr("checked");
     }
  });


  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  });



//前端分页
var limit = 13; //每页显示数据条数
var total = $('#host_table').find('tr').length;
var allPage = total%limit>0?parseInt(total/limit)+1:parseInt(total/limit);

function doPage(n){
    if(allPage>1){
        var prevPage='',nextPage='',pageHtml='';

        if (n===1) {
            prevPage = '<li class="disabled"><a href="javascript:;">上一页</a></li>';
            nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>';
        } else if(n===allPage){
            prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>';
            nextPage = '<li class="disabled"><a href="javascript:;">下一页</a></li>';
        } else {
            prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>';
            nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>';
        }
        for(var i=1;i<=allPage;i++){
            if (n===i) {
                pageHtml += '<li class="active"><a href="javascript:;">'+ i +'</a></li>';
            }else{
                pageHtml += '<li data-page="'+ i +'"><a href="javascript:;">'+ i +'</a></li>';
            }
        }
        $('#pagination').html(prevPage+pageHtml+nextPage);
    }

    $('#host_table').find('tr').hide();
    if(n===1){
        $('#host_table').find('tr:lt('+ limit +')').show();
    }else{
        $('#host_table').find('tr:gt('+ ((n-1)*limit-1) +'):lt('+ limit +')').show();
    }

}

doPage(1);

$('#pagination').on('click', 'li a', function(event) {
    event.preventDefault();
    var curr = parseInt($(this).parent().data('page'));

    if (!isNaN(curr)) {
        doPage(curr);
    }
});



//删除主机
$("td a[name='del']").click(function(){
   var ip = $(this).attr('ip');
   var statu = confirm("是否确认删除！");
   if (statu==true)
    {
    $.post("/cmdb/delhost/",{'ips':ip},function(data){
    if (data == "权限不足"){
            alert("权限不足，请联系管理员！");
        }else{

        if (data == "已删除"){
            location.reload();
        }
    }
    })

    }
})


//编辑主机信息填充内容
$("td a[name='edit']").click(function(){
    var ip = $(this).attr('ip');
    $.post("/cmdb/edithost/",{'ip':ip},function(data){
    if (data == "权限不足"){
            alert("权限不足，请联系管理员！");
        }else{

        var info = eval('(' + data + ')');
        $("#edit-IP").val(info.ip);
        $("#edit-username").val(info.username);
        $("#edit-device-type").val(info.device_type);
        $("#edit-idc").val(info.idc);
        $("#edit-port").val(info.port);
        $("#edit-host-group").val(info.host_group);
        $("#edit-msg").val(info.msg);
        $("#sub-edit-host").attr('host_id',info.host_id);
        $("#edit-hostModal").modal('show');
        }
    })
});



</script>